<template>
  <div class="log-panel">
    <div class="log-panel-header">
      <h3>日志审计</h3>
      <div class="log-panel-tools">
        <select v-model="filterType" class="log-select">
          <option value="">全部类型</option>
          <option value="登录">登录</option>
          <option value="登出">登出</option>
          <option value="新增">新增</option>
          <option value="编辑">编辑</option>
          <option value="删除">删除</option>
        </select>
        <input v-model="search" class="log-search" placeholder="搜索操作人/详情..." />
      </div>
    </div>
    <table class="log-table">
      <thead>
        <tr>
          <th>操作人</th>
          <th>类型</th>
          <th>详情</th>
          <th>时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="log in pagedLogs" :key="log.id">
          <td>{{ log.user }}</td>
          <td>{{ log.type }}</td>
          <td>{{ log.detail }}</td>
          <td>{{ log.time }}</td>
        </tr>
        <tr v-if="!pagedLogs.length">
          <td colspan="4" style="text-align:center;color:#aaa;">暂无日志</td>
        </tr>
      </tbody>
    </table>
    <div class="log-pagination" v-if="totalPages > 1">
      <button :disabled="page===1" @click="page--">上一页</button>
      <span>第 {{ page }} / {{ totalPages }} 页</span>
      <button :disabled="page===totalPages" @click="page++">下一页</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue';

const logs = ref([
  { id: 1, user: 'admin', type: '登录', detail: '登录系统', time: '2025-07-01 09:00' },
  { id: 2, user: 'admin', type: '编辑', detail: '编辑用户信息', time: '2025-07-01 09:10' },
  { id: 3, user: 'user1', type: '新增', detail: '新增内容“公告1”', time: '2025-07-01 10:00' },
  { id: 4, user: 'user2', type: '删除', detail: '删除文件“test.png”', time: '2025-07-01 10:30' },
  { id: 5, user: 'admin', type: '登出', detail: '退出系统', time: '2025-07-01 11:00' },
  { id: 6, user: 'user1', type: '登录', detail: '登录系统', time: '2025-07-02 08:50' },
  { id: 7, user: 'user1', type: '编辑', detail: '编辑内容“公告1”', time: '2025-07-02 09:20' },
  { id: 8, user: 'user2', type: '登录', detail: '登录系统', time: '2025-07-02 09:30' },
  { id: 9, user: 'user2', type: '新增', detail: '新增内容“新闻2”', time: '2025-07-02 10:00' },
  { id: 10, user: 'admin', type: '删除', detail: '删除内容“公告1”', time: '2025-07-02 11:00' },
  // 可继续补充更多模拟数据
]);
const filterType = ref('');
const search = ref('');
const page = ref(1);
const pageSize = 5;

const filteredLogs = computed(() => {
  let arr = logs.value;
  if (filterType.value) arr = arr.filter(l => l.type === filterType.value);
  if (search.value) {
    const s = search.value.trim().toLowerCase();
    arr = arr.filter(l => l.user.toLowerCase().includes(s) || l.detail.toLowerCase().includes(s));
  }
  return arr;
});
const totalPages = computed(() => Math.max(1, Math.ceil(filteredLogs.value.length / pageSize)));
const pagedLogs = computed(() => {
  const start = (page.value - 1) * pageSize;
  return filteredLogs.value.slice(start, start + pageSize);
});

// 页码联动
watchEffect(() => {
  if (page.value > totalPages.value) page.value = totalPages.value;
  if (page.value < 1) page.value = 1;
});
</script>

<style scoped>
.log-panel {
  width: 100%;
}
.log-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.log-panel-tools {
  display: flex;
  gap: 12px;
}
.log-select, .log-search {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
}
.log-search {
  width: 180px;
}
.log-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.log-table th, .log-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}
.log-table th {
  background: #f4f6fa;
  color: #555;
}
.log-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.log-pagination button {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 14px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}
.log-pagination button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style>
